<template>
	<view class="create-order">
		<view class="top-bg">
			<view class="blod">到店消费</view>
			<view class="">请您在指定地点到门店消费</view>
		</view>
		<view class="shop-about">
			<view class="font-28 shop-name blod">兵之王（铂金时代店）</view>
			<view class="u-flex font-24 address">
				<view style="max-width: 90%;" class="">绵阳高新区普明寺社区居委会6组普明寺后街27号1楼绵阳高新区普明寺社区居委会</view>
				<image  src="../../static/businessDistrict/导航.png" style="width:50rpx;height: 50rpx;" mode=""></image>
			</view>
			<u-line color="#F0F0F0" />
		</view>
		
		<view class="shop-name-box u-flex u-line-1">
			<image src="../../static/businessDistrict/主-商城.png" style="width:30rpx;height: 30rpx;margin-right: 10rpx;" mode=""></image>
			<text>兵之王（高新店</text>
		</view>
		<view class="u-flex detail-box">
			<image src="../../static/agricultureProduct/banner1.png" style="width:140rpx;height: 140rpx;border-radius: 15rpx;" mode=""></image>
			<view class="u-flex-1 content">
				<view class="title">
					兵王
				</view>
				<view class="des">
						月售234
				</view>
				<view class="u-flex u-row-between">
					<view class="price">
						￥9.8
					</view>
					<view style="color: #646464;">
						X1
					</view>
				</view>
			</view>
		</view>
		<u-cell-item title="糖果抵扣" value="可用1颗糖果抵用1.0元" :arrow="false" :value-style="valuStyle"></u-cell-item>
		<u-cell-item title="优惠券" value="满9元 立减2元 " arrow-direction="down" :value-style="valuStyle" @click="showCoupon = true"></u-cell-item>
		<u-field
			v-model="mobile"
			label="备注"
			placeholder="建议留言前请与卖家沟通"
		>
		</u-field>
		<view class="bottom-action">
			<view class="detail-left" @click="showPopup = !showPopup">
				共1件，实际付款
				<text class="price">￥9.8</text>
				<u-icon class="icon" name="arrow-down" size="30" color="#999999"></u-icon>
			</view>
			<u-button class="buy-btn" type="primary" color="#fffff" @click="toPay">提交订单</u-button>
		</view>
		<u-popup 
			v-model="showPopup"
			mode="bottom"
			z-index="100"
			border-radius="20"
			:mask-close-able="false"
			>
			<view class="order-detail">
				<view class="header">
					费用明细
					<u-icon name="close-circle" color="#888888" size="40" @click="closePopup"></u-icon>
				</view>
				<view class="u-flex detail-box">
					<image src="../../static/agricultureProduct/banner1.png" style="width:140rpx;height: 140rpx;border-radius: 15rpx;" mode=""></image>
					<view class="u-flex-1 content">
						<view class="title">
							兵王
						</view>
						<view class="des">
								月售234
						</view>
						<view class="u-flex u-row-between">
							<view class="price">
								￥9.8
							</view>
							<view class="">
								X1
							</view>
						</view>
					</view>
				</view>
				<view class="sweet u-flex u-row-between">
					<view class="">糖果抵用</view>
					<view class="primary">-￥2.4</view>
				</view>
				<view class="sweet u-flex u-row-between">
					<view class="">优惠券</view>
					<view class="primary">-￥2.4</view>
				</view>
			</view>
		</u-popup>
		<u-popup
			v-model="showCoupon"
			mode="bottom"
			z-index="102"
			border-radius="20"
			:mask-close-able="false"
			>
			<view class="header">
				选择优惠券
				<u-icon name="close-circle" color="#888888" size="40" @click="showCoupon = false"></u-icon>
			</view>
			<view class="coupon-list">
				<view class="tip">
					<text class="font-28 bold">可用优惠券（1张）</text>
					<text class="font-24 primary">商家/平台优惠券只能二选一使用</text>
				</view>
				<coupon-item v-for="(item, index) in couponList" :key="index">
					<view class="coupon-tag">通用</view>
					<!-- <view class="coupon-tag">商家</view> -->
				</coupon-item>
				<view class="tip-none">
					<text>没有更多有效券了，查看</text>
					<text class="primary">我的优惠券</text>
				</view>
				<view class="no-use">暂不使用优惠券</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import couponItem from '@/components/coupon/listItem.vue'
	export default {
		components: {
			couponItem
		},
		data() {
			return {
				valuStyle: {
					'color': '#FF6600'
				},
				showPopup: false,
				showCoupon: true, // 优惠券弹窗
				couponList: [1, 2, 3]
			}
		},
		methods: {
			closePopup() {
				this.showPopup = false;
			},
			toPay() {
				uni.navigateTo({
					url: '/pages/businessDistrict/pay'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.top-bg {
		padding-top: 60rpx;
		padding-left: 30rpx;
		height: 180rpx;
		width: 100%;
		background-image: url(../../static/agricultureProduct/banner1.png);
		background-repeat: no-repeat;
		background-size: cover;
		color: #FFFFFF;
		font-size: 28rpx;
	}
	.shop-about {
		padding: 50rpx 30rpx 0rpx 30rpx;
		color: #000000;
		.shop-name {
			margin-bottom: 10rpx;
		}
		.address {
			justify-content: space-between;
			align-items: flex-start;
			padding-bottom: 30rpx;
		}
		
	}
	.detail-box {
		padding: 30rpx 30rpx;
		margin-bottom: 30rpx;
		.content {
			margin-left: 20rpx;
		}
		.price {
			color: #FF6600;
			font-size: 30rpx;
		}
		.des {
			margin-top: 8rpx;
			color: #999999;
			font-size: 24rpx;
		}
	}
	.shop-name-box{
		padding: 30rpx 30rpx 0 30rpx;
	}
	.bottom-action {
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 101;
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		display: flex;
		background-color: #fff;
		.price {
			color: #FF6600;
			font-size: 36rpx;
		}
		.icon {
			padding-left: 30rpx;
		}
		.detail-left {
			text-align: center;
			width: 66%;
			color: #606163;
			font-size: 24rpx;
		}
		.buy-btn {
			margin-right: 0;
			border-radius: 0;
			font-size: 30rpx;
			color: #fff;
			width: 34%;
			background: linear-gradient(90deg, #FF6600, #FF9933);
			border: 0;
		}
		
	}
	.header {
		position: relative;
		line-height: 100rpx;
		color: #000000;
		font-size: 36rpx;
		text-align: center;
		border-bottom: 1rpx solid #BCBBBB;
		
		/deep/.uicon-close-circle {
			position: absolute;
			right: 30rpx;
			top: 0;
			line-height: 100rpx;
		}
	}
	.order-detail {
		padding-bottom: 100rpx;
		
		.primary {
			color: #FF6600;
		}
		.sweet {
			margin-bottom: 20rpx;
			padding: 0 30rpx;
			font-size: 28rpx;
			color: #333;
		}
	}
	.coupon-list {
		padding: 20rpx 30rpx;
		.tip {
			margin-bottom: 20rpx;
		}
		.tip-none {
			margin-top: 105rpx;
			text-align: center;
			color: #ADADAD;
			font-size: 24rpx;
		}
		.no-use {
			margin-top: 105rpx;
			margin-bottom: 30rpx;
			text-align: center;
			color: #999999;
			font-size:30rpx;
		}
	}
	.coupon-tag {
		position: absolute;
		top: 0;
		left: 0;
		padding: 10rpx 15rpx;
		font-size: 16rpx;
		color: #FFFFFF;
		background: linear-gradient(90deg, #FF6600 0%, #FF9933 100%);
		border-bottom-right-radius: 24rpx;
	}
</style>
